<template>
<view>
	<!-- 表单详情系列 -->
	<view style="font-size: 28rpx;font-weight: bold; padding:20rpx">表单结果</view>
	<!-- 单行文本 -->
	<view class="detail-wrap m-b2">
		<view class="detail-item">
			<view class="label">联系人</view>
			<view class="detail-input">
				<view class="content">
					<view class="val">单行文本</view>
					<view class="link">取消</view>
				</view>				
				<view class="icon">
					<view class="iconfont f-s68">&#xeb8a;</view>
				</view>	
			</view>			
		</view> 
	</view>
	
	<!-- 多行文本 -->
	<view class="detail-wrap m-b2">
		<view class="detail-item">
			<view class="label a-t">联系地址</view>
			<view class="detail-textarea">
				<view class="content">
					广东省广州市黄埔区绿地中央广场广东省广州市黄埔区绿地中央广场广东省广州市黄埔区绿地中央广场
				</view>					 
			</view>			
		</view> 
	</view>
	
	<!-- 下拉 -->
	<view class="detail-wrap m-b2">
		<view class="detail-item">
			<view class="label a-t">下拉</view>
			<picker class="detail-picker" mode="selector" @change="">
				<view class="picker">
					<view class="select-data t-r">下拉选择</view>
					<view class="icon">
						<view class="iconfont f-s34">&#xe8d4;</view>
					</view>						
				</view>	
			</picker> 					
		</view> 
	</view>
	
	<!-- 开关 -->
	<view class="detail-wrap m-b2">
		<view class="detail-item">
			<view class="label">联系地址</view>
			<view class="detail-switch">
				<view class="switch-name">开关</view>
				<switch color="#3399FF"></switch> 				 
			</view>			
		</view> 
	</view>
	
	<!-- radio -->
	<view class="detail-wrap m-b2">
		<view class="detail-item">
			<view class="label">性别</view>
			<view class="detail-radio">
				<view class="radio-item">
					<label>
						<text>男</text><radio value="" class="radio" color="#3399FF"/>
					</label>
				</view>	
				<view class="radio-item">
					<label>
						<text>女</text><radio value="" class="radio" color="#3399FF"/>
					</label>
				</view>			 
			</view>			
		</view> 
	</view>
	
	<!-- 图片 -->
	<view class="detail-wrap m-b2">
		<view class="upload-pic-item">
			<view class="label">包装照片</view>
			<view class="form-upload-pic">
				<view class="img-item" v-for="(item,index) in 5" :key="index">
					<image src="@/static/images/filter_bg.png" mode="widthFix" class="filter-bg"><!-- 占位 --></image>
					<view class="img-wrap">
						<image class="img" src="@/static/images/image.jpg" mode="widthFix"></image>
					</view> 
					<view class="del-icon"><view class="iconfont">&#xe74b;</view></view>
				</view>
				<view class="img-item add-btn"><image src="@/static/images/upload_pic.png" mode="widthFix"></image></view>
			</view>	
			<view class="upload-pic-tips">上传设备图片(最多5张)</view>
		</view>
	</view>
	
	<!-- 附件上传 -->
	<view class="detail-wrap m-b2">
		<view class="form-upload-item">
			<view class="hd">
				<view class="label a-t"><text class="iconfont">&#xe62f;</text>上传附件</view>
				<view class="iconfont f-s48">&#xe635;</view> 
			</view>
			<view class="file-list">
				<view class="file-item">
					<view class="icon"><image src="@/static/images/pdf.png" mode="widthFix"></image></view>
					<view class="name-area">	
						<view class="name">11.doc</view>
						<view class="size">11MB</view>
					</view>
					<view class="iconfont del-icon f-s36">&#xe8b6;</view>
				</view>
				<view class="file-item">
					<view class="icon"><image src="@/static/images/pdf.png" mode="widthFix"></image></view>
					<view class="name-area">	
						<view class="name">11.doc</view>
						<view class="size">11MB</view>
					</view>
					<view class="iconfont del-icon f-s36">&#xe8b6;</view>
				</view>
			</view>
		</view> 
	</view> 
	
	
	<!-- ******************表单系列*************************** -->
	
	<view style="font-size: 28rpx;font-weight: bold; padding:20rpx">表单</view>
	
	<!-- 单行文本 --> 
	<view class="form-wrap m-b2">
		<view class="form-item">
			<view class="label">联系人</view>
			<view class="form-input">
				<view class="content">
					<input type="text" class="inp" value="" placeholder="输入文本" />
				</view>				
			</view>			
		</view> 
	</view>
	<!-- 多行 -->
	<view class="form-wrap m-b2">
		<view class="form-item">
			<view class="label">联系人</view>
			<view class="form-input">
				<view class="content">
					<textarea class="inp-text" id="" ></textarea> 
				</view>				
			</view>			
		</view> 
	</view>
	
	<!-- radio -->
	<view class="form-wrap m-b2">
		<view class="form-item">
			<view class="label">性别</view>
			<view class="form-radio">
				<view class="radio-item">
					<label>
						<text>男</text><radio class="radio" value="" color="#f00"/>
					</label>
				</view>	
				<view class="radio-item">
					<label>
						<text>女</text><radio class="radio" value="" color="#f00"/>
					</label>
				</view>			 
			</view>			
		</view> 
	</view>
	
	<!-- 开关 -->
	<view class="detail-wrap m-b2">
		<view class="detail-item">
			<view class="label">联系地址</view>
			<view class="detail-switch">
				<view class="switch-name">开关</view>
				<switch color="#3399FF"></switch> 				 
			</view>			
		</view> 
	</view>
	
	<!-- 下拉 -->
	<view class="form-wrap m-b2">
		<view class="form-item">
			<view class="label">选择</view>
			<picker class="form-picker" mode="selector" @change="">
				<view class="picker">
					<view class="select-data t-r">下拉选择</view>
					<view class="icon">
						<view class="iconfont f-s34">&#xe8d4;</view>
					</view>						
				</view>	
			</picker> 						
		</view> 
	</view>
	
	<!-- 多行-1 -->
	<view class="form-wrap m-b2">
		<view class="form-item"> 
			<view class="form-textarea">
				<textarea class="inp-textarea" placeholder="输入文本" maxlength="-1"></textarea> 
			</view>						
		</view> 
	</view>
	
	<!-- 多行-2 -->
	<view class="form-wrap m-b2">
		<view class="form-textarea-item">
			<view class="label a-t">备注信息</view>
			<view class="form-textarea">
				<textarea class="inp-textarea" v-model="params.remark" placeholder="备注信息(选填),如地块名称等" maxlength="-1"></textarea>
			</view>
		</view>
	</view>
	
	<!-- 图片上传 -->
	<view class="form-wrap m-b2">
		<view class="upload-pic-item">
			<view class="label">包装照片</view>
			<view class="form-upload-pic">
				<view class="img-item" v-for="(item,index) in 5" :key="index">
					<image src="@/static/images/filter_bg.png" mode="widthFix" class="filter-bg"><!-- 占位 --></image>
					<view class="img-wrap">
						<image class="img" src="@/static/images/image.jpg" mode="widthFix"></image>
					</view> 
					<view class="del-icon"><view class="iconfont">&#xe74b;</view></view>
				</view>
				<view class="img-item add-btn"><image src="@/static/images/upload_pic.png" mode="widthFix"></image></view>
			</view>	
			<view class="upload-pic-tips">上传设备图片(最多5张)</view>
		</view>
	</view>
	
	<!-- 多行 radio 选择 -->
	<view class="detail-wrap m-b2">
		<label class="check-item">
			<view class="text">100毫升/瓶</view>
			<radio class="radio" value="" color="#f00"/>
		</label> 
	</view>
	
	
	
	
	 
</view>
</template>

<script>
</script>

<style>
@import url("../static/style/css/form.css");
</style>
